<template>
	<view class="page">
		<view class="top-background-raduis"> </view>
		<view v-if="alreadLogin">欢迎登录
			<button @click="quit()"> 退出 </button>
		</view>
		<view class="login-box" v-else>
			<view class="login-card-title">
				<view class="login-card-title-content"> 账号密码登录 </view>
			</view>
			<view class="login-card-input">
				<!-- 输入框头部图标 -->
				<uni-easyinput class="hj-input" v-model="accountId" focus maxlength="30" :trim="true"
					@focus="UserNamePassWrodFocusBorderStyle" :styles="inputColorConfigToUserName"
					@blur="UserNamePassWrodBlurBorderStyle" placeholder="请输入账号"></uni-easyinput>
				<!-- 输入框头部图标 -->
				<uni-easyinput class="hj-input" v-model="password" type="password" @focus="PassWordFocusBorderStyle"
					@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord" placeholder="请输入密码">
				</uni-easyinput>
				<!-- 输入框头部图标 -->
				<uni-easyinput class="hj-input" v-model="nick" @focus="PassWordFocusBorderStyle"
					@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord" placeholder="请输入昵称(可选)">
				</uni-easyinput>
			</view>
			<view class="login-card-loginIn">
				<view class="login-card-loginIn-btn" v-on:click="Login()">
					登 录
				</view>
				<view class="login-card-loginIn-btn" v-on:click="Register()">
					注册
				</view>
			</view>
		</view>
		<view class="bottom-message">
			登录/注册代表你已同意《xxx使用协议》
		</view>
	</view>
</template>


<script>
	//import {  } from "@/common/api/{$}.js";
	export default {
		data() {
			return {
				// 输入框边框颜色默认值
				colorDefault: '#b4b4b4',
				// 输入框边框聚焦值
				colorFocusColor: '#3cb79a',
				// 输入框颜色配置
				inputColorConfigToUserName: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4",
				},
				// 输入框颜色配置
				inputColorConfigToPassWord: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4",
				},
				value: "",
				accountId: "",
				password: "",
				nick: "",
				alreadLogin: false
			};
		},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad() {
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {
			
		},
		onShow() {

			uni.request({
				url: this.$baseUrl + '/check/state',
				header: {
					'Content-Type': 'application/json;charset=UTF-8',
					'token': uni.getStorageSync("token")
				},
				method: 'GET',
				success: (resp) => {
					if (resp.data.code == "0000") {
						this.alreadLogin = true
					} else {
						uni.removeStorageSync("token")
						this.alreadLogin = false
					}
				}

			})
		},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage() {},
		created() {},
		methods: {
			// 输入框聚焦变换边框样式
			UserNamePassWrodFocusBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorFocusColor;
			},
			PassWordFocusBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorFocusColor;
			},
			// 输入框失去焦点变换边框样式
			UserNamePassWrodBlurBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorDefault;
			},
			PassWordBlurBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorDefault;
			},
			Login() {
				if (this.accountId === "") {
					alert("请输入账号")
					return
				}
				if (this.password === "") {
					alert("请输入密码")
					return
				}
				uni.request({
					url: this.$baseUrl + '/login',
					data: {
						account_id: this.accountId,
						password: this.password
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					success: function(res) {
						if (res.data.code === "0000") {
							uni.setStorageSync('token', res.data.data.token)
							console.log(uni.getStorageSync('token'))
							alert("登录成功")
							uni.switchTab({
								url: '../postings/posting'
							})
						} else {
							alert("登陆失败，请重新登录")
						}

					}
				})
			},
			Register() {
				if (this.accountId === "") {
					alert("请输入账号")
					return
				}
				if (this.password === "") {
					alert("请输入密码")
					return
				}
				uni.request({
					url: this.$baseUrl + '/registered',
					data: {
						account_id: this.accountId,
						password: this.password,
						real_name: this.nick
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					success: function(res) {
						if (res.data.code == '0000') {
							alert("注册成功，请登录")
						} else {
							alert(res.data.message)
						}
					}
				})
			},
			quit() {
				uni.removeStorageSync("token")
				this.alreadLogin = false
			}
		},
	};
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.page {
		position: relative;
		height: 100vh;
	}

	.top-background-raduis {
		height: 30%;
		background-color: #d8d8d8;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	/deep/ .is-input-border {
		border-radius: 7px !important;
	}

	/deep/ .uni-easyinput__content {
		min-height: 39px !important;
	}

	.hj-input {
		margin-top: 15rpx;
	}

	.hj-input:nth-child(2) {
		margin-top: 35rpx;
	}

	.login-box {
		top: 20%;
		position: absolute;
		width: 80%;
		left: 10%;
		right: 10%;
		height: 650rpx;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 9px 9px 6px #e3e3e3;

		.login-card-input {
			// background-color: violet;
			height: 50%;
			padding: 5rpx;
		}

		.login-card-title {
			height: 20%;
			// background-color: black;
			padding: 10rpx;
			display: flex;
			justify-content: center;

			.login-card-title-content {
				font-size: 1.2em;
				color: #3cb79a;
				border-bottom: 3px solid #3cb79a;
			}
		}

		.login-card-loginIn {
			height: 25%;
			display: flex;
			justify-content: center;
			padding: 10rpx;
			padding-top: 50rpx;
			align-items: center;

			.login-card-loginIn-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #3cb79a;
				width: 100%;
				font-size: 1.2em;
				height: 80%;
				border-radius: 40rpx;
				color: white;
			}
		}

		.login-bottom-info {
			height: 5%;
			display: flex;
			font-size: 0.7em;
			color: #3cb79a;
			justify-content: end;

		}
	}

	.bottom-message {
		position: absolute;
		height: 70rpx;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		font-size: 0.9em;
		overflow: hidden;
		color: #969898;
		bottom: 40rpx;
	}
</style>
